<template>
  <div>
    <el-form :inline="true" :model="from" class="demo-form-inline">
      <el-form-item label="耳号" >
          <el-select v-model="page.basicInforId" placeholder="请选择" style="width:500px" clearable>
            <el-option v-for="item in BasicInformationList.filter((d:any) => d.gender == 1 && d.pigTypeId==1)" :label="item.earNumber" :value="item.basicInforId" />
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="loadData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="router.push('/ShowInfancies')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" :icon="Plus" @click="router.push('/AddInfancies')">新建</el-button>
    <el-button type="danger" :icon="Delete" @click="RangeDel()">删除</el-button>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="infancieId" label="序号" align="center" />
      <el-table-column property="documentNumber" label="单据号" width="180" />
    <el-table-column property="openingDate" label="期初日期" width="130">
      <template #default="scope">
        {{ scope.row.openingDate.replace('T',' ').substr(0,10) }}
      </template>
    </el-table-column>
    <el-table-column property="earNumber" label="耳号" />
    <el-table-column property="bedroomName" label="栋舍名称" />
    <el-table-column property="fieldName" label="栏位" />
      <el-table-column prop="weight" label="重量(公斤)" align="center" />
      <el-table-column prop="createdOwner" label="创建人" align="center" />
      <el-table-column prop="createdTime" label="创建日期" width="180" align="center">
        <template #default="scope">
          {{ scope.row.createdTime.replace('T', ' ').substring(0, 19) }}
        </template>
      </el-table-column>
      <el-table-column prop="updateOwner" label="修改人" align="center" />
      <el-table-column prop="updateTime" label="修改日期" width="90" align="center"/>
      <el-table-column prop="examineOwner" label="审核人" align="center" />
      <el-table-column prop="examineTime" label="审核日期" width="90" align="center"/>
      <el-table-column label="操作" align="center" width="110">
        <template #default="scope" >
          <el-button type="primary" link @click="Del(scope.row.infancieId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <table>
      <tr>
        <td>
          <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
            :page-sizes="[5, 10, 15, 20]" :background="true" layout="total,slot, prev, pager,next" :total="page.totalCount"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
            ,每页显示{{ page.pageSize }},当前第{{ page.pageIndex }}/{{ page.pageCount }}
            <el-button class="btn-prev" @click="handleCurrentChange(1)">首页</el-button>
          </el-pagination>
        </td>
        <td>
          <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
            :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot,sizes,jumper" :total="page.totalCount"
            @size-change="handleSizeChange" @current-change="handleCurrentChange">
            <el-button class="btn-prev" @click="handleCurrentChange(page.pageCount)">尾页</el-button>
          </el-pagination>
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import axios from 'axios'
import { Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();
onMounted(() => {
  loadData();
  GetBasicInformation();
  GetBedrooms();
})

//分页查询字段
const page = reactive({
  basicInforId:0,
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0
})

//公猪期初列表
const tableData = ref([])
const loadData = () => {
  axios.post(apiBedinUrl+'/api/Infancies/ShowInfancies', {
    basicInforId:page.basicInforId||0,
    pageIndex: page.pageIndex,
    pageSize: page.pageSize
  })
    .then(res => {
      console.log("公猪期初列表", res.data.data.list);
      tableData.value = res.data.data.list;
      page.totalCount = res.data.data.totalCount;
      page.pageCount = res.data.data.pageCount;
    })
}

//猪只信息耳号列表
const BasicInformationList=ref([]);
const GetBasicInformation=()=>{
    axios.post(apiBedinUrl+'/api/Infancies/GetBasicInformation',{})
    .then(res=>{
        console.log("猪只信息耳号",res.data.data);
        BasicInformationList.value = res.data.data;
    })
}

//栋舍列表
const BedroomsList=ref([]);
const GetBedrooms=()=>{
    axios.post(apiBedinUrl+'/api/Infancies/GetBedrooms',{})
    .then(res=>{
        console.log("栋舍列表",res.data.data);
        BedroomsList.value = res.data.data;
    })
}

//删除
const Del = (infancieId: number) => {
  ElMessageBox.confirm(
    '确认要删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put(apiBedinUrl+'/api/Infancies/DelInfancies', {
        infancieId: infancieId
      })
        .then(res => {
          if (res.data.code == 0) {
            ElMessage.success('删除成功');
            loadData();
          }
          else {
            ElMessage.error('删除失败');
            return;
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

//分页
const handleSizeChange = (val: number) => {
  page.pageSize = val;
  loadData();
};
const handleCurrentChange = (val: number) => {
  page.pageIndex = val;
  loadData();
};
</script>
